<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <div class="mt-10 mb-10">
        <line-from-choose @change="change"/>
      </div>
    </div>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">投注账号</p>
    <analyse-online-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-pie :data="chartData.chartData1" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData2" />
      </el-col>
    </el-row>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">投注金额</p>
    <analyse-online-table :table-data="tableData2" :key_mapper="key_mapper2" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-pie :data="chartData2.chartData1" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData2.chartData2"/>
      </el-col>
    </el-row>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">人均投注</p>
    <analyse-online-table :table-data="tableData3" :key_mapper="key_mapper3" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-pie :data="chartData3.chartData1" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData3.chartData2"/>
      </el-col>
    </el-row>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">税收</p>
    <analyse-online-table :table-data="tableData4" :key_mapper="key_mapper4" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-pie :data="chartData4.chartData1" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData4.chartData2"/>
      </el-col>
    </el-row>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">玩法营收</p>
    <analyse-online-table :table-data="tableData5" :key_mapper="key_mapper5" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-pie :data="chartData5.chartData1" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData5.chartData2"/>
      </el-col>
    </el-row>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">抽水率</p>
    <analyse-online-table :table-data="tableData6" :key_mapper="key_mapper6" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-pie :data="chartData6.chartData1" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData6.chartData2"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { yesterday } from '@/model/DateRange'
import { RuleAnalysis } from '@/api/table'
import mixins from '@/model/mixins'
import mixinsFrom from '@/model/mixinsFrom'
// import { fixed3 } from '@/utils'
// import { sendForm } from '@/utils/'
export default {
  name: 'Play',
  mixins: [mixins, mixinsFrom],
  data() {
    return {
      tableData: [],
      key_mapper: [],
      chartData: {
        chartData1: {
          columns: ['key', 'value'],
          rows: []
        },
        chartData2: {
          columns: [],
          rows: []
        }
      },
      chartData2: {
        chartData1: {
          columns: ['key', 'value'],
          rows: []
        },
        chartData2: {
          columns: [],
          rows: []
        }
      },
      chartData3: {
        chartData1: {
          columns: ['key', 'value'],
          rows: []
        },
        chartData2: {
          columns: [],
          rows: []
        }
      },
      chartData4: {
        chartData1: {
          columns: ['key', 'value'],
          rows: []
        },
        chartData2: {
          columns: [],
          rows: []
        }
      },
      chartData5: {
        chartData1: {
          columns: ['key', 'value'],
          rows: []
        },
        chartData2: {
          columns: [],
          rows: []
        }
      },
      chartData6: {
        chartData1: {
          columns: ['key', 'value'],
          rows: []
        },
        chartData2: {
          columns: [],
          rows: []
        }
      },
      queryFrom: {
        report_type: 'bet_user',
        interval_type: 'day',
        target_time: yesterday
      },
      tableData2: [],
      key_mapper2: [],
      tableData3: [],
      key_mapper3: [],
      tableData4: [],
      key_mapper4: [],
      tableData5: [],
      key_mapper5: [],
      tableData6: [],
      key_mapper6: [],
      API: RuleAnalysis
    }
  },
  watch: {
    tableData() {
      this.chartData.chartData1.rows = []
      const chartFromPiv =  this.tableData.length!=0&&this.tableData[this.tableData.length - 1]||{}
      const keysArr = Object.keys(chartFromPiv).filter(key => key !== 'day')
      for (const key of keysArr) {
        this.chartData.chartData1.rows.push({ key: key, value: chartFromPiv[key] })
      }
      const chartFrom = this.tableData.slice(0, this.tableData.length - 2)
      this.chartData.chartData2.rows = chartFrom
      this.chartData.chartData2.columns = []
      this.key_mapper.map(item => {
        this.chartData.chartData2.columns.push(item.key)
      })
      // console.log(this.key_mapper)
      // console.log(this.chartData.chartData2.columns)
      // this.chartData.chartData2.columns = this.key_mapper.map
      this.chartData = this.pie(this.chartData, this.key_mapper)
    },
    tableData2() {
      this.chartData2.chartData1.rows = []
      const chartFromPiv = this.tableData2.length!=0&&this.tableData2[this.tableData2.length - 1]||{}
      const keysArr = Object.keys(chartFromPiv).filter(key => key !== 'day')
      for (const key of keysArr) {
        this.chartData2.chartData1.rows.push({ key: key, value: chartFromPiv[key] })
      }
      const chartFrom = this.tableData2.slice(0, this.tableData2.length - 2)
      this.chartData2.chartData2.rows = chartFrom
      this.chartData2.chartData2.columns = []
      this.key_mapper2.map(item => {
        this.chartData2.chartData2.columns.push(item.key)
      })
      this.chartData2 = this.pie(this.chartData2, this.key_mapper2)
      // console.log(this.chartData2)
    },
    tableData3() {
      this.chartData3.chartData1.rows = []
      const chartFromPiv = this.tableData3.length!=0&&this.tableData3[this.tableData3.length - 1]||{}
      const keysArr = Object.keys(chartFromPiv).filter(key => key !== 'day')
      for (const key of keysArr) {
        this.chartData3.chartData1.rows.push({ key: key, value: chartFromPiv[key] })
      }
      const chartFrom = this.tableData3.slice(0, this.tableData3.length - 2)
      this.chartData3.chartData2.rows = chartFrom
      this.chartData3.chartData2.columns = []
      this.key_mapper3.map(item => {
        this.chartData3.chartData2.columns.push(item.key)
      })
      this.chartData3 = this.pie(this.chartData3, this.key_mapper3)
    },
    tableData4() {
      this.chartData4.chartData1.rows = []
      const chartFromPiv =  this.tableData4.length!=0&&this.tableData4[this.tableData4.length - 1]||{}
      const keysArr = Object.keys(chartFromPiv).filter(key => key !== 'day')
      for (const key of keysArr) {
        this.chartData4.chartData1.rows.push({ key: key, value: chartFromPiv[key] })
      }
      const chartFrom = this.tableData4.slice(0, this.tableData4.length - 2)
      this.chartData4.chartData2.rows = chartFrom
      this.chartData4.chartData2.columns = []
      this.key_mapper4.map(item => {
        this.chartData4.chartData2.columns.push(item.key)
      })
      this.chartData4 = this.pie(this.chartData4, this.key_mapper4)
    },
    tableData5() {
      this.chartData5.chartData1.rows = []
      const chartFromPiv = this.tableData5.length!=0&&this.tableData5[this.tableData5.length - 1]||{}
      const keysArr = Object.keys(chartFromPiv).filter(key => key !== 'day')
      for (const key of keysArr) {
        this.chartData5.chartData1.rows.push({ key: key, value: chartFromPiv[key] })
      }
      const chartFrom = this.tableData5.slice(0, this.tableData5.length - 2)
      this.chartData5.chartData2.rows = chartFrom
      this.chartData5.chartData2.columns = []
      this.key_mapper5.map(item => {
        this.chartData5.chartData2.columns.push(item.key)
      })
      this.chartData5 = this.pie(this.chartData5, this.key_mapper5)
    },
    tableData6() {
      this.chartData6.chartData1.rows = []

      const chartFromPiv =this.tableData6.length!=0&&this.tableData6[this.tableData6.length - 1]||{}
      const keysArr = Object.keys(chartFromPiv).filter(key => key !== 'day')
      for (const key of keysArr) {
        this.chartData6.chartData1.rows.push({ key: key, value: chartFromPiv[key] })
      }
      const chartFrom = this.tableData6.slice(0, this.tableData6.length - 2)
      this.chartData6.chartData2.rows = chartFrom
      this.chartData6.chartData2.columns = []
      this.key_mapper6.map(item => {
        this.chartData6.chartData2.columns.push(item.key)
      })
      this.chartData6 = this.pie(this.chartData6, this.key_mapper6)
    }
  },
  created() {
    this.sendBoth()
  },
  methods: {
    sendBoth() {
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'bet_user' }), this.API, 'key_mapper', 'tableData')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'bet_amount' }), this.API, 'key_mapper2', 'tableData2')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'bet_amount_avg' }), this.API, 'key_mapper3', 'tableData3')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'tax_amount' }), this.API, 'key_mapper4', 'tableData4')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'profit_amount' }), this.API, 'key_mapper5', 'tableData5')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'profit_margin' }), this.API, 'key_mapper6', 'tableData6')
    },
    change(data) {
      Object.assign(this.queryFrom, data)
      this.sendBoth()
    }
  }
}
</script>
